<template>
    <div class="search">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- 搜索框 -->
        <div class="search-box">
            <form action="/">
                <van-search
                    v-model="value"
                    show-action
                    placeholder="请输入搜索关键词"
                    @input="onInput"
                    @cancel="onCancel"
                    @focus="onFocus"
                />
            </form>
        </div>
        <!-- 搜索提示列表 -->
        <div class="helper" v-show="value && !isSortShow">
            <div
                class="item"
                v-for="(item, index) in keywords"
                :key="index"
                @click="onSort(item.name)"
            >
                {{item.name}}
            </div>
        </div>
        <!-- 历史记录和热门搜索 -->
        <div class="content" v-show="!value">
            <!-- 历史记录 -->
            <div class="history">
                <div class="title">
                    <div>历史记录</div>
                    <!-- 删除 -->
                    <div class="icon" @click="delHistory"></div>
                </div>
                <div class="items">
                    <div
                        class="item"
                        v-for="(item, index) in history.historyData"
                        :key="index"
                        @click="onSort(item.keyword)"
                    >
                        {{item.keyword}}
                    </div>
                </div>
            </div>
            <!-- 热门搜索 -->
            <div class="hot">
                <div class="title">
                    <div>热门搜索</div>
                </div>
                <div class="items">
                    <div
                        class="item"
                        v-for="(item, index) in history.hotKeywordList"
                        :key="index"
                        @click="onSort(item.keyword)"
                    >
                        {{item.keyword}}
                    </div>
                </div>
            </div>
        </div>
        <!-- 排序 -->
        <div class="sort" v-if="isSortShow">
            <!-- 导航 -->
            <div class="navbar">
                <van-tabs
                    v-model="active"
                    line-height="0"
                    title-active-color="#b4282d"
                    @click="toggleList"
                >
                    <van-tab title="综合"></van-tab>
                    <van-tab title="价格"></van-tab>
                    <van-tab title="分类"></van-tab>
                </van-tabs>
            </div>
            <div class="goods-subList">
                <ul class="list-items">
                    <div
                        class="list-item"
                        v-for="(val, index) in keywords"
                        :key="index"
                        @click="toGoods(val.id)"
                    >
                        <img :src="val.list_pic_url" alt="">
                        <p>{{val.name}}</p>
                        <p>￥{{val.retail_price}}</p>
                    </div>
                    <div class="list-item moreGoods">
                    </div>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

import { getHelperActionInfo, setAddHistoryActionInfo, getIndexActionInfo, delHistoryInfo } from '@/api/pages/search/index.js'

    export default {
         data() {
            return {
                value: '',
                keywords: '',
                active: 0,
                order: '',
                isSortShow: false,
                openId: localStorage.getItem('openId'),
                history: '',
                keyword: ''
            }
        },
        methods: {
            // 获取热门搜索与历史记录
            getHistory() {
                getIndexActionInfo({ openId: this.openId })
                .then(res => {
                    console.log(res);
                    this.history = res
                })
            },
            // 返回
            onClickLeft() {
                this.$router.go(-1);
            },
            // 输入的时候搜索提示
            onInput(keyword) {
                getHelperActionInfo({ keyword, })
                .then(res => {
                    this.keywords = res.keywords
                })
            },
            // 点击搜索提示弹出排序
            onSort(keyword) {
                // 排序的数据
                getHelperActionInfo({ keyword, })
                .then(res => {
                    this.keywords = res.keywords
                    this.keyword = keyword;
                    // 让排序界面弹出
                    this.isSortShow = true;
                })
                // 关键词存入数据库
                setAddHistoryActionInfo({ keyword, openId: this.openId })
                .then(res => {
                    // 获取热门搜索与历史记录
                    this.getHistory()
                    console.log(res);
                })
            },
            // 搜索框聚焦时
            onFocus() {
                if (this.value) {
                    // 执行下弹出排序
                    this.onInput(this.value)
                }
                // 同时关闭排序
                this.isSortShow = false;
            },
            onCancel() {
                console.log('object');
            },
            // 删除搜索历史
            delHistory() {
                delHistoryInfo({openId: this.openId})
                .then(res => {
                    console.log('删除历史', res);
                    this.getHistory()
                })
            },
            // 商品详情跳转
            toGoods(id) {
                this.$router.push( { path: '/pages/goods', query: { id, } } )
            },
            // 标签切换列表
            toggleList(newval) {
                var obj = { keyword: this.keyword }
                // 价格升序降序
                if (newval == 1) {
                    if (this.order == 'asc') {
                        this.order = 'desc'
                    } else {
                        this.order = 'asc'
                    }
                    obj.order = this.order;
                } else {
                    this.order = ''
                }
                // 排序的数据
                getHelperActionInfo(obj)
                .then(res => {
                    this.keywords = res.keywords
                    // 让排序界面弹出
                    this.isSortShow = true;
                })
                // 关键词存入数据库
                setAddHistoryActionInfo({ keyword: this.keyword, openId: this.openId })
                .then(res => {
                    console.log(res);
                    // 获取热门搜索与历史记录
                    this.getHistory()
                })
            }
        },
        created() {
            // 进入界面获取历史记录
            this.getHistory()
        }
    }
</script>

<style lang="scss" scoped>
    .search{
        width: 100%;
        .header{
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }
        .search-box{
            margin-top: 1.226667rem;
        }
        .helper{
            padding: 10px;
            background: #fff;
            position: fixed;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
            .item{
                padding: .26667rem 0;
            }
        }
        .sort{
            position: fixed;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9;
            background: #f4f4f4;
            .goods-subList{
                width: 100%;
                margin-top: 5px;
                .list-items{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    .list-item{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        margin-bottom: 6px;
                        width: 180px;
                        background: #fff;
                        img{
                            width: 151px;
                            height: 151px;
                        }
                        p{
                            width: 180px;
                            margin: 0 0 12px 10px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        p:last-child {
                            color: #9c3232;
                        }
                    }
                    .moreGoods{
                        height: 0;
                    }
                }
            }
        }
        .content{
            position: fixed;
            background: #f4f4f4;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
            .history{
                padding: 20px;
                background: #fff;
                .title{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                    .icon{
                        width: 18px;
                        height: 18px;
                        background: url(../../../assets/img/del-address.png);
                        background-size: 100%;
                    }
                }
                .items{
                    display: flex;
                    flex-wrap: wrap;
                    .item{
                        padding: .13333rem .13333rem;
                        border: .01333rem solid #999;
                        margin: 0 .4rem .26667rem 0;
                        flex-shrink: 0;
                    }
                }
            }
            .hot{
                margin-top: 10px;
                padding: 20px;
                background: #fff;
                .title{
                    margin-bottom: 20px;
                }
                .items{
                    display: flex;
                    flex-wrap: wrap;
                    .item{
                        padding: .13333rem .13333rem;
                        border: .01333rem solid #999;
                        margin: 0 .4rem .26667rem 0;
                        flex-shrink: 0;
                    }
                    div:first-child {
                        border: .01333rem solid #b4282d;
                        color: #b4282d;
                    }
                }
            }
        }
    }
</style>
